//广告页
import advview from "@/adv.ejs"
import axios from "../api/index.js"

let baseURL = axios.defaults.baseURL;
console.log(baseURL, "api获取");

async function getdata (res, p = 1) {
  let { data } = await axios.get("/adv/getdata", {
    params: {
      p
    }
  });
  console.log(data, "2000");
  console.log(data.adv, "1000");
  res.render(advview({ adv: data.adv, baseURL, pageCount: data.pageCount }))
}

async function addAdv (res) {
  let addadvEle = document.querySelector(".addadv")
  let maskEle = document.querySelector(".mask")
  let adduermodel = document.querySelector(".adduermodel");
  //点击添加显示添加广告页面
  addadvEle.onclick = function () {
    maskEle.style.display = "block"
    adduermodel.style.display = "block"
  }
  //点击x隐藏添加页面
  let closebtn = document.querySelector(".closebtn")
  closebtn.onclick = function () {
    maskEle.style.display = "none"
    adduermodel.style.display = "none"
  }
  // 点击上传图片
  let imgFileBtn = document.querySelector(".imgFile")
  let imgshow = document.querySelector(".imgshow")
  imgFileBtn.onchange = function () {
    console.log(111);
    console.log(this.files);
    //获取input框里的图片
    let imgObj = this.files[0]
    console.log("555", imgObj);
    //把图片转为数据的方法
    let filerader = new FileReader();
    filerader.readAsDataURL(imgObj)
    filerader.onload = function () {
      let myimg = new Image();
      myimg.src = filerader.result;
      myimg.style.width = "100px";
      myimg.style.height = "100px";
      imgshow.innerHTML = "";
      imgshow.appendChild(myimg);
    }
  }

  //提交
  let submitBtn = document.querySelector(".btn")
  let usernameEle = document.querySelector(".username")
  submitBtn.onclick = async function () {
    let username = usernameEle.value
    let imgFile = imgFileBtn.files[0]
    if (username == "") {
      return alert("广告名为空")
    }
    if (typeof imgFile == "undefined") {
      return alert("图片为空")
    }
    let form = new FormData();
    form.append("username", username)
    form.append("myimg", imgFile)
    let { data } = await axios.post("/adv/addadv", form)
    if (data.status == 1) {
      console.log(data);
      alert("添加成功")
      maskEle.style.display = "none";
      adduermodel.style.display = "none";
      await getdata(res);
      await addAdv(res);
    } else {
      alert("添加失败")
    }

    // axios.get("/adv/getdata")

  }

  //删除
  let delBtns = document.querySelectorAll(".delBtn")
  delBtns.forEach(btn => {
    btn.onclick = async function () {
      console.log("删除");
      let _id = this.getAttribute("myid")
      let reslut = confirm("你确定要删除吗?");
      if (reslut) {
        let { data } = await axios.delete("/adv/deladv", {
          params: {
            _id
          }
        })
        console.log(data, "5555");  // 后端返还的结果值。
        if (data.status == 1) {
          await getdata(res);  // 渲染视图 
          await addAdv(res);   // 绑定事件
        } else {
          console.log(data);
        }
      }
    }
  })


  //修改按钮
  let updates = document.querySelectorAll(".update")
  updates.forEach(update => {
    update.onclick = async function () {
      let _id = this.getAttribute("myid")
      console.log(_id);
      maskEle.style.display = "block"
      adduermodel.style.display = "block"
      //跳转删除路由
      await axios.delete("/adv/deladv", {
        params: {
          _id,
        }
      })
      submitBtn.onclick = async function () {
        let username = usernameEle.value
        let imgFile = imgFileBtn.files[0]
        if (username == "") {
          return alert("广告名为空")
        }
        if (typeof imgFile == "undefined") {
          return alert("图片为空")
        }
        let form = new FormData();
        form.append("username", username)
        form.append("myimg", imgFile)
        //跳转添加路由
        let { data } = await axios.post("/adv/addadv", form)
        if (data.status == 1) {
          alert("修改成功");
          maskEle.style.display = "none"
          adduermodel.style.display = "none"
          await getdata(res);
          await addAdv(res);
        }
      }
    }
  })




  //分页
  let pageEles = document.querySelectorAll('.pageContainer a');
  pageEles.forEach(item => {
    item.onclick = async function (e) {
      //阻止a连接的默认跳转行为
      e.preventDefault();
      //当前点击的页码值
      let p = this.innerHTML;
      console.log(p);
      //重新渲染页面
      await getdata(res, p);
      await addAdv(res);
    }
  })
}

export default function (router) {
  router.route("/admin/adv", async (req, res) => {
    await getdata(res);
    await addAdv(res)

    //退出登录
    let loginout = document.querySelector(".loginout")
    loginout.onclick = function () {
      console.log(111);
      router.go("/login")
    }
  })
}



